import React, { Component } from 'react';
import PropTypes  from 'prop-types';
import {Form,Select,Input} from "antd"
const Item=Form.Item
const Option=Select.Option
class Userform extends Component {
    static propTypes={
        setForm:PropTypes.func.isRequired,
        roles:PropTypes.array.isRequired,
        user:PropTypes.object,
    }
    componentWillMount(){
        this.props.setForm(this.props.form)
    }
    render() { 
        const {roles,user}=this.props 
        // console.log(user);
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
              span:4
            },
            wrapperCol: {
             span:16
            },
          };
        return ( <Form {...formItemLayout}>
        <Item label="用户名">
        {getFieldDecorator('username', {
          initialValue:user.username
          })(
            <Input
              placeholder="用户名必须"
            />,
          )}
        </Item>
        {
            user._id?null:(
                <Item label="密码 ">
                {getFieldDecorator('password', {
                  initialValue:user.password
                  })(
                    <Input
                      placeholder="密码必须"
                    />,
                  )}
                </Item>
            )
        }
         <Item label="手机号 ">
                {getFieldDecorator('phone', {
                  initialValue:user.phone
                  })(
                    <Input
                      placeholder="手机号必须"
                    />,
                  )}
                </Item>
        <Item label="邮箱 ">
                {getFieldDecorator('email', {
                  initialValue:user.email
                  })(
                    <Input
                      placeholder="邮箱必须"
                    />,
                  )}
                </Item>
        <Item label="角色 ">
                {getFieldDecorator('role_id', {
                  initialValue:user.role_id
                  })(<Select>
                      {roles.map(role=><Option key={role._id} value={role._id}>{role.name}</Option>)}
                  </Select>)}
                </Item>
        </Form> );
    }
}
 
export default Form.create()(Userform);